﻿/******************************************************************************
* File description: CustomToast.qml
* Function: Toast Loading版，提供加载动画
* Current Version: 1.0.0
 *****************************************************************************/

import QtQuick 2.12
import QtGraphicalEffects 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls 1.4 as Controls14
import QtQuick.Controls.Styles 1.4

// 直接在代码中同时调用QtQuick.Controls 2模块和QtQuick.Controls模块会出错
// 正确的做法是将使用到的QtQuick.Controls模块进行类型重命名，然后再调用其中的控件
// [参考] https://blog.csdn.net/zbw1185/article/details/81058486

Item {
    id: root
    property int loadingState: 0    // 0正确 1错误 2加载中
    property string text: "这是一个空的消息提示"


    height: 50*dp
    width: 310*dp


    // public =========================================================================


    property color color: "#1677FF"

    function load(msg){
        loadingState = 2
        indicator.running = true
        down()
        timer_up.stop()
        root.text = msg
    }
    function finish(msg, type){
        loadingState = type
        root.text = msg
        indicator.running = false
        timer_up.start()
    }


    // private =========================================================================
    Timer{
        id: timer_up
        interval: 1000
        onTriggered: {
            up()
            timer_up.stop()
        }
    }

    function down(){    // 从上向下滑下来
        rect.state = "downState"
    }
    function up(){      // 再滑上去
        rect.state = "upState"
    }
    // 这里应该是加两个State的切换

    clip: true

    Rectangle{
        id: rect
        height: 44*dp
        width: 300*dp
        x: 5*dp
        state: "upState"
        states:[
            State {
                name: "downState"
                PropertyChanges {
                    target: rect
                    y: 5*dp
                    opacity: 1
                }
            },
            State {
                name: "upState"
                PropertyChanges {
                    target: rect
                    y: -55*dp
                    opacity: 0.2
                }
            }
        ]
        transitions: [
            Transition {
                from: "downState"
                to: "upState"
                NumberAnimation{
                    properties: "y"
                    duration: 200
                    easing.type: Easing.InOutQuad
                }NumberAnimation{
                    properties: "opacity"
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            },Transition {
                from: "upState"
                to: "downState"
                NumberAnimation{
                    properties: "y"
                    duration: 80
                    easing.type: Easing.InOutQuad
                }NumberAnimation{
                    properties: "opacity"
                    duration: 80
                    easing.type: Easing.InOutQuad
                }
            }
        ]


        border.color: Qt.rgba(0, 0, 0, 0.01)
        border.width: 12*dp

        layer.enabled: true
        layer.effect: DropShadow{
            color: Qt.rgba(0, 0, 0, 0.1)
            samples: 32
            radius: 12*dp
            spread: 0.1
        }


        Rectangle{

            radius: 3*dp
            anchors.fill: parent
            Text {
                text: root.text
                anchors.verticalCenter: parent.verticalCenter
                x: 40*dp
                font.pixelSize: config.fontsize
            }
            CustomImage{
                height: 16*dp; width: 16*dp
                visible: loadingState === 0 || loadingState === 1
                x: 15*dp;  y: 14*dp
                source: loadingState===0 ? "qrc:/picture/msgSuccess.png" : (loadingState===1 ? "qrc:/picture/msgError.png" : "qrc:/picture/msgWarning.png")
            }
            Controls14.BusyIndicator{
                id: indicator
                height: 16*dp; width: 16*dp
                anchors.verticalCenter: parent.verticalCenter
                x: 15*dp
                visible: running
                running: true
                style: BusyIndicatorStyle{
                    indicator: Image {
                        visible: control.running
                        source: "qrc:/picture/loading3.png"
                        ColorOverlay{
                            anchors.fill: parent
                            color: root.color
                            source: parent
                        }
                        mipmap: true
                        RotationAnimator on rotation {
                            running: control.running
                            loops: Animation.Infinite
                            duration: 2000
                            from: 0 ; to: 360
                        }
                    }
                }
            }

        }
    }

}
